<template>
  <div>
    <a-table
      ref="table"
      :loading="loading"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :expanded-row-keys="expandedRowKeys"
      :columns="mainColumns"
      :data-source="mainData"
      row-key="id"
      @expand="expandedRowsChange"
    >
      <span
        slot="index"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <a-table
        slot="expandedRowRender"
        slot-scope="text"
        :columns="childColumns"
        :data-source="data"
        :pagination="false"
      >
        <span
          slot="index"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
      </a-table>
      <template
        slot="remark"
        slot-scope="text, row, index"
      >
        <div>
          <BaseInput
            v-if="row.editable"
            v-model="row.remark"
          />
          <template v-else>
            {{ row.remark }}
          </template>
        </div>
      </template>
      <template
        slot="operation"
        slot-scope="text, row, index"
      >
        <div
          v-if="state !== 3"
          class="editable-row-operations"
        >
          <span v-if="row.editable">
            <a @click="save(row)">保存</a>
            <a @click="cancel(row)">取消</a>
          </span>
          <span v-else>
            <a
              :disabled="editingKey !== ''"
              @click="edit(row)"
            >编辑</a>
          </span>
        </div>
      </template>
    </a-table>
    <pagination
      v-model="pageNo"
      :total="totalSize"
      :page-size.sync="pageSize"
      @change="handlePageChange"
      @showSizeChange="showSizeChange"
    />
    <excel
      ref="exportSelect"
      file-name="供应商维度"
      is-click-generate="false"
    >
      <span slot="excelBtn" />
    </excel>
  </div>
</template>
<script>
import {
    supplierMainMaterialsList,
    supplierMainEdit,
    materialsMainEdit,
    supplierMainList
} from '@/api/material/procurement/sign'
import { mainColumns, childColumns } from './insideModel'

const data = []
export default {
	name:'a'+Date.now(),
    data: function() {
        this.cacheData = data.map(item => ({ ...item }))
        return {
            loading: false,
            pageNo: 1,
            queryParam: {},
            pageSize: 10,
            totalSize: 0,
            mainData: [],
            data: [],
            mainColumns: mainColumns,
            childColumns: childColumns,
            selectedRowKeys: [],
            expandedRowKeys: [],
            selectedRows: [],
            editingKey: '',
            childSelectedRowKeys: [],
            childSelectRow: [],
            recordId: null
        }
    },
    props: {
        state: {
            type: Number
        },
        id: {
            type: String
        }
    },
    mounted() {
        this.list()
        this.$refs.exportSelect.tableToExcelFile(this.$refs.table)
        this.$bus.$on('exportSelectSupplier', () => {
            console.log('exportSelectSupplier')
            this.exportSelect()
        })
    },
    methods: {
        exportSelect() {
            if (this.selectedRows.length > 0) {
                this.$refs.exportSelect.setDataAndGenerate(this.selectedRows)
            } else {
                this.$message.warning('请选择需要导出的数据')
            }
        },
        childChange: function(selectedRowKeys, selectedRows) {
            console.log(selectedRowKeys)
            console.log(selectedRows)
            this.childSelectRow = selectedRows[0]
            this.childSelectedRowKeys = selectedRowKeys
            selectedRows[0].recommendWin = true
            supplierMainList(selectedRows[0]).then(res => {
                if (res.code === 200 || res.data.code === 200) {
                    this.$message.success('编辑成功')
                    this.list()
                }
            })
        },
        expandedRowsChange: function(expanded, record) {
            if (expanded) {
                this.expandedRowKeys = [record.id]
                this.recordId = record.id
                this.materialsList()
            } else {
                this.expandedRowKeys = []
            }
        },
        list: function() {
            let _this = this
            let params = {
                pageSize: _this.pageSize,
                pageNo: _this.pageNo,
                countersignId: _this.id,
                ...this.queryParam
            }
            this.loading = true
            supplierMainList(params).then(res => {
                if (res.code === 200 || res.data.code === 200) {
                    _this.mainData = res.data
                    _this.totalSize = res.totalSize
                }
                this.loading = false
            })
        },
        materialsList: function(id) {
            let _this = this
            supplierMainMaterialsList({
                id: this.recordId
            }).then(res => {
                if (res.code === 200 || res.data.code === 200) {
                    _this.data = res.data
                    _this.cacheData = JSON.parse(JSON.stringify(_this.data))
                }
            })
        },
        search(val) {
            this.pageNo = 1
            this.queryParam = val
            this.list(val)
        },
        handlePageChange(pageNo, pageSize) {
            this.pageNo = pageNo
            this.list()
            this.selectedRowKeys = []
        },
        showSizeChange(pageNo, pageSize) {
            this.pageNo = 1
            this.pageSize = pageSize
            this.list()
        },
        edit(row) {
            const newData = [...this.mainData]
            this.editingKey = row.id
            row.editable = true
            this.mainData = newData
        },
        handleChange(value, row, column) {
            const newData = [...this.data]
            const target = newData.filter(item => row.id === item.id)[0]
            if (target) {
                target[column] = value
                this.data = newData
            }
        },
        save(row) {
            this.loading = true
            supplierMainEdit(row).then(res => {
                if (res.code === 200 || res.data.code === 200) {
                    this.$message.success('编辑成功')
                    this.list()
                }
                this.loading = false
            })
            this.editingKey = ''
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.$console(selectedRows)
            this.selectedId = []
            selectedRows.map(i => {
                this.selectedId.push(i.id)
            })
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        cancel(row) {
            const newData = [...this.mainData]
            this.editingKey = ''
            const target = newData.filter(item => row.id === item.id)[0]
            if (target) {
                target.editable = false
                this.mainData = newData
            }
            this.list()
        }
    }
}
</script>
